<template>
  <div style="margin-top:50px;">   
    <TopWithBack></TopWithBack>
     <div class="updatepassword_box">
        <input type="tel" id="phone" placeholder="请输入您的手机号" value="" v-model='telpahone'/>
      </div>
      <div class="index_divide"></div>
      <div class="updatepassword_idetity_box">
          <input type="text" id="phoneverify" name="phoneverify" placeholder="请输入验证码" v-model="code"/>
          <button type="button" id="sendvf" v-if="timer==0" @click="send_message">发送验证码</button>
          <button type="button" id="sendvf" v-else style="width:160px;">({{timer}})秒后重新发送</button>
      </div>
      <div class="index_divide"></div>
      <div class="updatepassword_box">
          <input type="text" name="pwdtwo" id="pwdtwo" placeholder="请输入您的密码" v-model='password'/>
      </div>
      <div class="index_divide"></div>
      <div class="index_divide"></div>
         <div class="updatepassword_box">
            <input type="password" name="pwdtwo1" id="pwdtwo1" placeholder="请重新输入您的密码" v-model='repassword'/>
        </div>
      <div class="index_divide"></div>
      <div class="update_btn" @click="findPwd"><input type="submit" value="确定"></div>
  </div>
</template>
<script>
import TopWithBack from './../common/TopWithBack.vue'
import { sendmessage, updPwd } from '@/api/login'
import { Message, MessageBox, Loading } from 'element-ui'
export default{
  name: 'Register',
  data(){
    return{ 
      telpahone: '',//账号
      password: '',//密码
      repassword: '',//再次输入的密码
      code: '',//输入的验证码
      timer: 0,//定时器
      count: 60,//倒计时
      verify:'',//返回的验证码
      agree:'',//判断用户协议是否同意
    }
  },
  methods:{
    //发送验证信息
    send_message: function() {
        if (this.timer > 0) {
            return false;
        }
        if (this.telpahone == '') {
            this.$vux.toast.show({
              text: '请输入您的手机号',
              type: 'warn',
              time: 800,
            })
            return;
        }
        if (!(/^1[3|4|5|8]\d{9}$/.test(this.telpahone))) {
            this.$vux.toast.show({
              text: '手机号有误，请重新输入！',
              type: 'warn',
              time: 800,
            })
            return;
        }
        var tenp_count = this.count;
        this.timer = tenp_count;
        var self = this
        var countimer = setInterval(function() {
            if (self.timer == 0) {
                clearInterval(countimer);
                return
            } else {
                self.timer = self.timer - 1;
            }

        }, 1000)
        let param = {
          phone:this.telpahone,
          check:1
        }
        sendmessage(param).then(response=>{
          console.log(response)
            this.verify = response.data.code
            Message({
              message: response.msg,
              type: 'success',
              duration: 5 * 1000,
              // location:'middle'
            })
        })        

    },
    //修改密码前验证
    findPwd: function() {
        var telpahone = this.telpahone
        var code = this.code
        var password = this.password
        var repassword = this.repassword
        if (telpahone == '') {
            Message({
              message: '手机号不能为空',
              type: 'warning',
              duration: 5 * 1000,
              // location:'middle'
            })
            return
        }
        if (!(/^1[3|4|5|8]\d{9}$/.test(telpahone))) {
            this.$vux.toast.show({
              text: '手机号有误，请重新输入！',
              type: 'warn',
              time: 800,
            })
            return
        }
        if (code == '') {
            this.$vux.toast.show({
              text: '请输入验证码',
              type: 'warn',
              time: 800,
            })
            return
        }
        if (password == '') {
            this.$vux.toast.show({
              text: '请输入您的密码',
              type: 'warn',
              time: 800,
            })
            return
        }
         if (repassword == '') {
            this.$vux.toast.show({
              text: '请再次输入您的密码',
              type: 'warn',
              time: 800,
            })
            return
        } 
        this.doUpdatePwd()

    },
    //修改密码
    doUpdatePwd: function() {
        if(this.verify!== this.code){
          this.$vux.toast.show({
            text: '您输入的验证码有误,请重新输入',
            type: 'warn',
            time: 800,
          })  
          return
        }
        if(this.repassword !== this.password){
          this.$vux.toast.show({
            text: '您两次输入的密码不一致,请重新输入你的密码',
            type: 'warn',
            time: 800,
          })
           return
        }
        let param = {
          phone:this.telpahone,
          password:this.password,
          repassword:this.repassword,
          verify:this.verify
        }
        updPwd(param).then(response=>{
            this.$store.dispatch('updateTel',response.data.mytoken).then(() => {
              // console.log('1')
              this.$router.go(-1)
            }).catch((err) => {
              console.log(err)
            })
        })

    },
    OpenAbout(){

    },
  },
  components:{
    TopWithBack,
  }
}
</script>
<style>
.home{
  font-size:50px;
}
</style>


